<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="common.js"></script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
        
        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        
        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }
        
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }
        
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
        
        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
        
        .all ol li.current {
            background: yellow;
        }
        
        #arr {
            display: none;
        }
        
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
        
        #arr #right {
            right: 5px;
            left: auto;
        }
        
        img {
            height: 200px;
            width: 500px;
        }
    </style>
</head>

<body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="./background/bj1.jpg"></li>
                <li><img src="./background/bj2.jpg"></li>
                <li><img src="./background/bj3.jpg"></li>
                <li><img src="./background/bj4.jpg"></li>
                <li><img src="./background/bj5.jpg"></li>
            </ul>
            <ol>
                <!-- 动态创建的小方块，添加在这里，样式已经给写好了-->
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
</body>
<script type="text/javascript">
    //1 获取元素
    var box = document.getElementById("box");
    var screenBox = box.children[0]; //可视区域
    var imgWid = screenBox.offsetWidth; //图片宽度
    var ul = screenBox.children[0]; //要运动的ul
    var lisUl = ul.children; //所有的图片li
    var ol = screenBox.children[1]; //放置小方块的位置
    var lisOl = ol.children; //要操作的小方块（默认没有内容，添加后会自动增加）
    var arrBox = box.children[1]; //左右箭头的父盒子
    var arrLeft = arrBox.children[0];
    var arrRight = arrBox.children[1];

    //动态创建元素部分
    var li;
    for (let i = 0; i < lisUl.length; i++) {
        li = document.createElement("li");
        li.innerHTML = i + 1;
        ol.appendChild(li);
    }

    //给第一个小方块默认颜色
    lisOl[0].className = "current";

    var count = 0;
    //简单轮播图效果
    for (let j = 0; j < lisOl.length; j++) {

        lisOl[j].index = j;

        lisOl[j].onclick = function() {

            if (count == lisUl.length - 1) {
                //点击按钮1时，判断，如果当前显示的为假的第一张，直接抽回到0
                ul.style.left = 0 + 'px';
            }

            //点击按钮变色效果
            for (var i = 0; i < lisOl.length; i++) {
                lisOl[i].className = "";
            }
            this.className = "current";

            //根据当前按钮的索引值设置ul的运动位置
            animate(ul, -this.index * imgWid);

            //由于需要让左右箭头操作与小方块操作联动，
            //需要在点击小方块时同步count的值，跟当前按钮索引值相同
            count = this.index;
        }
    }

    //对ul中的第一个li进行克隆操作，为了制作无缝滚动效果
    ul.appendChild(lisUl[0].cloneNode(true))

    arrRight.onclick = fun;

    arrLeft.onclick = function() {
        //当图片显示第一张时，如果往最左点击，则不显示最后一张(假的第一张)
        if (count == 0) {
            ul.style.left = -(lisUl.length - 1) * imgWid + "px";
            count = lisOl.length;
        }

        count--;
        animate(ul, -count * imgWid);

        //根据count的值，设置对应的小方块变色
        for (let i = 0; i < lisOl.length; i++) {
            lisOl[i].className = "";
        }

        lisOl[count].className = "current";
    };

    //自动播放
    //间隔一段时间，执行 右键按钮的功能
    var timer = null;

    //元素.click() ,用于直接触发标签的点击事件
    //不能采用函数体的方式书写函数
    timer = setInterval(function() {
        arrRight.click();
    }, 2000);

    //鼠标移入移除，对自动播放进行取消和设置
    //鼠标移入移除显示隐藏箭头
    box.onmouseover = function() {
        arrBox.style.display = "block";
        clearInterval(timer);
    }

    box.onmouseout = function() {
        arrBox.style.display = "none";
        timer = setInterval(function() {
            arrRight.click();
        }, 2000);
    }

    function fun() {
        //点击右键按钮时检测
        //如果当前显示为的第一张(即 最后一张)
        //再次点击按钮时，需要进行抽回操作，然后再进行滚动

        //lisOl.length与lisUl.length-1的值相同，使用哪个都可以
        if (count == lisOl.length) {

            ul.style.left = "0px";
            //ul的位置需要和count的值，
            //设置left为0后，再次将count = 0
            count = 0;
        }
        count++;
        animate(ul, -count * imgWid);

        //点击左右按钮时，设置小方块颜色变色
        //根据count的值，设置对应的小方块颜色变色
        for (var i = 0; i < lisOl.length; i++) {
            lisOl[i].className = "";
        }

        //如果count为5，lisOl.length,设置lisOl[0]类名操作
        if (count == lisOl.length) {
            lisOl[0].className = "current";
        } else {
            lisOl[count].className = "current";
        }
    }


    //动画函数
    function animate(element, target) {

        //清除旧的定时器，保证匀速运动，防止加速效果
        clearInterval(element.timeId);

        element.timeId = setInterval(function() {

            //1 获取元素当前位置 使用offsetLeft属性
            var current = element.offsetLeft
                //2 设置步长
            var step = 20;
            //根据当前位置和目标位置的大小关系进行判断
            step = target > current ? step : -step;
            //5 运动条件设置
            //检测当前位置和目标位置之间的距离，如果满足一个step的距离，可以运动，
            //否则直接运动到目标位置，结束
            if (Math.abs(target - current) > Math.abs(step)) {

                //3 设置运动公式:元素位置(新) = 元素位置(旧) + 步长;
                current = current + step;

                //4 设置给元素的left值运动
                element.style.left = current + "px";

            } else {

                //6 让element直接运动到目标位置，再清除定时器
                element.style.left = target + 'px';
                clearInterval(element.timeId);
            }

        }, 20)
    }
</script>

</html>